<template>
  <div style="width: 70%">
    <div>
      <el-form ref="form" :model="article" label-width="80px">
        <el-form-item label="分享标题">
          <el-input v-model="article.title"></el-input>
        </el-form-item>

        <el-form-item label="分享内容">
          <el-input
            type="textarea"
            maxlength="300"
            show-word-limit
            v-model="article.articleContext"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form :inline="true" ref="form" :model="article" label-width="80px">
        <el-form-item label="分享分类">
          <el-select
            v-model="article.tags"
            multiple
            disabled
            multiple-limit:3
            @change="$forceUpdate()"
            @remove-tag="removeTag"
            placeholder="请选择分类"
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="可见人员">
          <el-radio-group v-model="article.articleState">
            <el-radio label="0">所有人</el-radio>
            <el-radio label="1">仅自己</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="能否评论">
          <el-switch
            @change="$forceUpdate()"
            v-model="article.cancomment"
          ></el-switch>
        </el-form-item>
        <el-form-item label="能否点赞">
          <el-switch
            @change="$forceUpdate()"
            v-model="article.canlike"
          ></el-switch>
        </el-form-item>
        <el-form-item label="能否收藏">
          <el-switch
            @change="$forceUpdate()"
            v-model="article.cancollect"
          ></el-switch>
        </el-form-item>
      </el-form>
    </div>

    <div style="margin-left: 80px">
      <el-upload
        ref="upload"
        action="http://chm.pengdong.top/user/publish-picture"
        :auto-upload="false"
        list-type="picture-card"
        :http-request="uploadFile"
        :file-list="fileList"
        accept="image/png, image/jpeg, image/jpg"
        multiple
        :limit="6"
        :on-change="handleChange"
        :on-remove="handlePicRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>

      <el-button size="medium" type="primary" @click="submitUpload"
        >发布</el-button
      >
    </div>
  </div>
</template>
  
 



<script>
import { findArticleById } from "@/api/article";
import { publishPicture } from "@/api/article";
import { updateArticle } from "@/api/article";
export default {
  data() {
    return {
      article: {
        articleContext: "",
        account: "",
        tag: "",
        title: "",
        pictureId: "",
        articleState: "",
        sculpture: localStorage.getItem("avatar"),
        tags: [],
        canlike: true,
        cancomment: true,
        cancollect: true,
        canLike: 0,
        canComment: 0,
        canCollect: 0,
      },
      fileList: [],
      path: [],
      formData: {},
      flag: {},
      newFileList: [],
      options: [
        {
          value: "1",
          label: "美食",
        },
        {
          value: "2",
          label: "影视",
        },
        {
          value: "3",
          label: "学习",
        },
        {
          value: "4",
          label: "娱乐",
        },
        {
          value: "5",
          label: "音乐",
        },
        {
          value: "6",
          label: "科技",
        },
        {
          value: "7",
          label: "运动",
        },
        {
          value: "8",
          label: "生活",
        },
        {
          value: "9",
          label: "时尚",
        },
        {
          value: "10",
          label: "动物",
        },
      ],
    };
  },
  created() {
    this.findArticleById();
  },

  methods: {
    // 绑定在http-request,覆盖上传事件
    uploadFile(file) {
      this.formData.append("file", file.file);
      this.flag = file.file;
      console.log("flag");
      console.log(this.flag);
    },
    submitUpload() {
      var that = this;
      if (this.newFileList.length > 0) {
        this.formData = new FormData();
        this.$refs.upload.submit();
        publishPicture(this.formData).then((res) => {
          var vo = res.data;
          if (vo.code == 10000) {
            this.article.pictureId = res.data.data;
            this.concatPictureId();
            this.article.account = localStorage.getItem("account");
            for (var i = 0; i < this.article.tags.length; i++) {
              this.article.tag += "," + this.article.tags[i];
            }
            this.article.tag = this.article.tag.slice(1);
            if (this.article.canlike == false) {
              this.article.canLike = 1;
            } else {
              this.article.canLike = 0;
            }
            if (this.article.cancomment == false) {
              this.article.canComment = 1;
            } else {
              this.article.canComment = 0;
            }
            if (this.article.cancollect == false) {
              this.article.canCollect = 1;
            } else {
              this.article.canCollect = 0;
            }
            updateArticle(this.article).then((res) => {
              var vo = res.data;
              if (vo.code == 10000) {
                that.$message({
                  message: "发布成功！",
                  type: "success",
                  showClose: true,
                });
                this.$router.push({ path: `/` });
              } else if (vo.code == 10001) {
                var msg = vo.msg;
                for (var i = 0; i < vo.data.length; i++) {
                  msg += vo.data[i] + " ";
                }
                that.$message({
                  message: msg,
                  type: "warn",
                  showClose: true,
                });
              }
            });
          } else {
            that.$message({
              message: vo.msg,
              type: "warn",
              showClose: true,
            });
          }
        });
      } else {
        this.article.pictureId = "";
        this.concatPictureId();
        this.article.pictureId = this.article.pictureId.substr(
          0,
          this.article.pictureId.length - 1
        );
        this.article.account = localStorage.getItem("account");
        for (var i = 0; i < this.article.tags.length; i++) {
          this.article.tag += "," + this.article.tags[i];
        }
        this.article.tag = this.article.tag.slice(1);
        console.log(this.article.pictureId);
        if (this.article.canlike == false) {
          this.article.canLike = 1;
        } else {
          this.article.canLike = 0;
        }
        if (this.article.cancomment == false) {
          this.article.canComment = 1;
        } else {
          this.article.canComment = 0;
        }
        if (this.article.cancollect == false) {
          this.article.canCollect = 1;
        } else {
          this.article.canCollect = 0;
        }
        updateArticle(this.article).then((res) => {
          var vo = res.data;
          if (vo.code == 10000) {
            console.log("success");
            that.$message({
              message: "发布成功！",
              type: "success",
              showClose: true,
            });
            this.$router.push({ path: `/` });
          } else if (vo.code == 10001) {
            var msg = vo.msg;
            for (var i = 0; i < vo.data.length; i++) {
              msg += vo.data[i] + " ";
            }
            that.$message({
              message: msg,
              type: "warn",
              showClose: true,
            });
          }
        });
      }
    },

    findArticleById() {
      var aid = this.$route.params.id;
      findArticleById(aid).then((res) => {
        var vo = res.data;
        if (vo.code == 10000) {
          console.log("ini",res.data.data.article);
          this.article = res.data.data.article;
          this.article.tags = this.article.tag.split(",");
          this.article.tag = "";
          this.path = res.data.data.paths;
          if (this.article.canLike == 1) {
            this.article.canlike = false;
          } else {
            this.article.canlike = true;
          }
          if (this.article.canComment == 1) {
            this.article.cancomment = false;
          } else {
            this.article.cancomment = true;
          }
          if (this.article.canCollect == "1") {
            this.article.cancollect = false;
          } else {
            this.article.cancollect = true;
          }
          this.article.articleState = this.article.articleState + "";
          for (var i = 0; i < res.data.data.paths.length; i++) {
            var url =
              "http://chm.pengdong.top/index/get/" + res.data.data.paths[i];
            this.fileList.push({ url: url });
          }
          console.log(this.fileList);
        } else {
          console.log("no");
        }
      });
    },
    handlePicRemove(file) {
      let urlArr = file.url.split("/");
      let url = urlArr[urlArr.length - 1];
      let index = this.path.findIndex((v) => v == url);
      if (index != -1) this.path.splice(index, 1);
      index = this.newFileList.findIndex((v) => v == file.url);
      if (index != -1) this.newFileList.splice(index, 1);
    },
    concatPictureId() {
      var newPictureId = "";
      for (var i = 0; i < this.path.length; i++) {
        newPictureId += this.path[i] + ",";
      }
      this.article.pictureId = newPictureId + this.article.pictureId;
      console.log(this.article.pictureId);
    },
    handleChange(file, fileList) {
      console.log(file);
      this.newFileList.push(file.url);
    },
    removeTag(item) {
      console.log("移除的标签ID", item);
      console.log(this.article.tags);
    },
  },
};
</script>

<style>
.el-button--primary {
  color: white;
  margin-top: 20px;
  margin-right: 10px;
}
</style>